<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery鼠标经过二级菜单下拉代码</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

</head>
<body>

<!--nav-->
<div class="nav">
	<!--导航条-->
	<ul class="nav-main">
        <li>首页</li>
		<li id="li-1" data-num="1">关于CFOAM<span></span></li>
		<li id="li-2" data-num="2">信息中心<span></span></li>
		<li id="li-3" data-num="3">消费者服务<span></span></li>
		<li id="li-4" data-num="4">商务服务<span></span></li>
		<li>研究中心</li>
	</ul>
	<!--隐藏盒子-->
	<div id="box-1" class="hidden-box hidden-loc-index">
		<ul>
			<li>目的意义</li>
			<li>发展历程</li>
			<li>组织架构</li>
            <li>精英团队</li>
		</ul>
	</div>
	<div id="box-2" class="hidden-box hidden-loc-us">
		<ul>
			<li>加入联盟步骤</li>
			<li>申请要求</li>
		</ul>
	</div>
	<div id="box-3" class="hidden-box hidden-loc-info">
		<ul>
			<li>消费者服务</li>
			<li>产品信息</li>
			<li>关于我们</li>
			<li>商家信息</li>
			<li>加入我们</li>
            <li>关于我们</li>
			<li>产品信息</li>
		</ul>
	</div>
    <div id="box-4" class="hidden-box hidden-loc-info box04">
		<ul>
			<li>服务理念</li>
			<li>服务产品</li>
			<li>周边有机网络</li>
			<li>商铺汇总</li>
			<li>有机百科</li>
            <li>保障与维权</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
//    nav-li hover e
    var num;
    $('.nav-main>li[id]').hover(function(){
       /*图标向上旋转*/
        $(this).children().removeClass().addClass('hover-up');
        /*下拉框出现*/
        num = $(this).attr('data-num');
        $('#box-'+num).stop().slideDown(300);
    },function(){
        /*图标向下旋转*/
        $(this).children().removeClass().addClass('hover-down');
        /*下拉框消失*/
        $('#box-'+num).hide();
    });
//    hidden-box hover e
    $('.hidden-box').hover(function(){
        /*保持图标向上*/
        $('#li-'+num).children().removeClass().addClass('hover-up');
        $(this).show();
    },function(){
        $(this).stop().slideUp(200);
        $('#li-'+num).children().removeClass().addClass('hover-down');
    });
});

</script>


</body>
</html>